<template>
  <div class="side_nav">
    <div class="top">
      <router-link v-for="item,i in routers" :key="i" :to="item.to">{{item.name}}</router-link>
    </div>
    <div class="icon">
      <Popover>
        <template v-slot:content>
          sns请联系123456
        </template>
        <i class="iconfont icon-shequ" style="fontSize: 1.8em;"></i>
      </Popover>
      <Popover>
        <template v-slot:content>
         ins请关注321456
        </template>
        <i class="iconfont icon-ins" style="fontSize: 2em;"></i>
      </Popover>
      <Popover>
        <template v-slot:content>
          facebook请关注3218856
        </template>
        <i class="iconfont icon-face-book" style="fontSize: 2em;"></i>
      </Popover>
    </div>
  </div>
</template>

<script>
import Popover from './popover.vue'
export default {
  components:{
    Popover
  },
  data(){
    return{
      routers:[
        {
          to:'/home',
          name:'首页'
        },
        {
          to:'/about',
          name:'ABOUT'
        },
        {
          to:'/information',
          name:'INFORMATION'
        },
        {
          to:'/access',
          name:'ACCESS'
        },
        {
          to:'/contact',
          name:'CONTACT'
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">
.side_nav{
  height: 80vh;
  position: fixed;
  top: 4em;
  left: 4em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 99;
  cursor: pointer;
  .top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 2.6em;
    font-weight: 500;
    font-size: 1.2em;
  }
  .icon{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 3em;
    i:hover{
      font-weight: 600;
      color: orange;
    }
  }
  
  
  
}
.side_nav .top>a:hover{
  border-bottom: 4px solid orange;
}
</style>
